<template>
  <div>
    <!-- 右侧详情的对阵信息 -->
    <div class="row" style="padding: 15px 0">
      <div class="col-8 q-px-md">
        <div  style="height:30px;">
          <span
          style="height:18px; margin-top:6px;"
            class="panda-border panda-border-blue panda-text-blue border-radius-2px panda-px-2px  right-label-icon-like inline-block text-center q-mr-sm"
          >Data</span> {{  compute_dataSourceCode_fullname(right_detail_obj.dataSourceCode) }}   
        </div>
        <div style="height:30px;">
          <span
           style="height:18px; margin-top:6px;"
            class="panda-border panda-border-green panda-text-green border-radius-2px panda-px-2px right-label-icon-like inline-block text-center q-mr-sm"
          >Odds</span> {{  compute_dataSourceCode_fullname(right_detail_obj.riskManagerCode) }} 
        </div>
      </div>
      <div class="col-4 text-center" style="line-height:60px;" >
        <q-btn class="panda-btn-light-dense"  label="对阵管理" @click="to_show_match_edit(right_detail_obj)" style="width:72px;height:24px" />
      </div>
    </div>
    <div class="row border-top border-panda-dark-dark">
      <div
        v-for="(items,indexs) in  tab_options"
        :key="`select_tab_${indexs}`"
        @click="select_tab_click(items,indexs)"
        :class="select_tab_name==items.name? 'panda-tab-like-tab-active':'bg-panda-base-light'"
        class="col-1 text-panda-text-dark text-center cursor-pointer line-height-32px border-right border-panda-dark-dark box-sizing panda-tab-like-tab panda-btn-hover"
        style="width:69.5px;height: 32px;"
      >
        <span
          style="margin-left:4px;"
          class="panda-tab-like-tab-label"
          :class="select_tab_name==items.name?'text-panda-text-light ':'text-panda-text-dark'"
        >{{items.label}}</span>
      </div>
    </div>
    <div v-if="select_tab_name==1 || select_tab_name==2">
      <all-language-name :alllanguage_arr="alllanguage_arr"></all-language-name>
    </div>
  </div>
</template>

<style lang="stylus" scoped>
</style>

<script>
import allLanguageName from "src/components/info/allLanguageName.vue";
import alllanguage from "src/mixins/language/alllanguage.js";
import constantmixin from "src/mixins/constant/index.js";
export default {
  components: {
    allLanguageName
  },
  mixins: [...constantmixin,alllanguage],
  data() {
    return {
      tab_options: [
        { label: "主队", name: "1" },
        { label: "客队", name: "2" },
        { label: "联赛名", name: "3" },
        { label: "开赛时间", name: "4" },
        { label: "赔率", name: "5" }
      ],
      select_tab_name: "1",
      alllanguage_arr: [],
      language: ['homeTeamNames', 'awayTeamNames']
    };
  },
  props: {
    right_detail_obj: ""
  },
  watch: {
    right_detail_obj() {
      this.init_alllanguage_arr();
    }
  },
  methods: {
    select_tab_click(item, index) {
      this.select_tab_name = item.name;
    },
    init_alllanguage_arr() {
      let arr = this.all_language_rebase(
        this.right_detail_obj,
        this.language[this.select_tab_name - 1],
        "dataSourceCode",
        "relatedMatch",
        ['jc']
      );
      console.log(
        "let arr= this. all_language_rebase(this.right_detail_obj, 'tournamentName', 'dataSourceCode', 'relatedTour')"
      );
      this.alllanguage_arr= arr
    },
    to_show_match_edit(item) {
      this.$router.push({
        name: "match_manage_edit",
        query: {
          editing_obj_id: item.id,
          which_button: 2
        }
      });
    },
  },
  created() {
    this.init_alllanguage_arr();
  },
};
</script>
